<template>
    <van-tabbar route v-model="active" active-color="#fecb1c" inactive-color="#bfbfbf">
        <van-tabbar-item replace to="/home">
            <span>首页</span>
            <template #icon="props">
                <img :src="props.active ? icon[0].active : icon[0].inactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/board">
            <span>宠物寄养</span>
            <template #icon="props">
                <img :src="props.active ? icon[1].active : icon[1].inactive" />
            </template></van-tabbar-item>
        <van-tabbar-item replace to="/order">
            <span>订单</span>
            <template #icon="props">
                <img :src="props.active ? icon[2].active : icon[2].inactive" />
            </template></van-tabbar-item>
        <van-tabbar-item replace to="/mine">
            <span>我的</span>
            <template #icon="props">
                <img :src="props.active ? icon[3].active : icon[3].inactive" />
            </template></van-tabbar-item>
    </van-tabbar>
</template>
<script>
export default {
    data() {
        return {
            active: 0,
            icon: [
                {
                    active: require('../assets/img/sy1.png'),
                    inactive: require('../assets/img/sy.png'),
                },
                {
                    active: require('../assets/img/jy1.png'),
                    inactive: require('../assets/img/jy.png'),
                },
                {
                    active: require('../assets/img/dd1.png'),
                    inactive: require('../assets/img/dd.png'),
                },
                {
                    active: require('../assets/img/wd1.png'),
                    inactive: require('../assets/img/wd.png'),
                },
            ]
        };
    },
}
</script>